<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>品牌管理</title>
<style type="text/css">
	#form_goods_brand label.error{
		margin-left:10px;
		width:auto;
		display:inline;
		color:red;
	}
</style>
</head>
<body>
<div layout:fragment="content">
	<script th:inline="javascript">
	/*<![CDATA[*/
	
		KindEditor.ready(function(K) {
		       var editor =  K.create('#story', {
		        		urlType:'absolute',
		                uploadJson : '/upload/BRANDS',
		                allowFileManager : false	
		        });
		       editor.clickToolbar('multiimage',function(){
		    	   if($.browser.mozilla){
		    		   editor.hideDialog();
		    		   alert('请使用谷歌或者IE浏览器进行多文件的上传，火狐浏览器暂不支持!');
		    		   return false;
		    	   }
		       });
		});
		
		$.validator.addMethod('typeAllowed',function(value,element){
			var suffix = value.split('.').pop().toLowerCase();
			if(!(suffix.match(/jpg|jpeg|png|gif/i))){
				return false;
			}else{
				return true;
			}
		},'上传的图片类型只能是png,gif,jpg,jpeg');
        function uploadFile(e){
            $('#imgFile').click();
        }

        function uploadFile2(e){
            if($(e).val() != null){
                var filename = $(e).val().substr($(e).val().lastIndexOf('\\')+1);
                if(!($(e).val().split('.').pop().toLowerCase().match(/jpg|jpeg|png|gif/i))){
                	$('#file_upload_help').show();
                	return false;
                }else{
                	$('#file_upload_help').hide();
                }
                $('#file_upload_span').html(filename);
                $('#form_brand_image').submit();
            }
        }

		$().ready(function() {
			if($.browser.mozilla){
				Metronic.alert({'message':'<span style="color:red;">请使用谷歌或者IE浏览器进行多文件的上传，火狐浏览器暂不支持!</span>'});
			}
            $('#iframe_brand_image').load(function(){
                var data = $(window.frames['iframe_brand_image'].document.body).html();
                if(data != null && data != ''&& !data.match('You failed to upload')){
                    $('#brand_logo_display_div').html('<img style="width:100%;height:100%;" src="'+$.parseJSON(data).url+'"></img>');
                    $('#logo').val($.parseJSON(data).url);
                }
            });

			$("#form_goods_brand").validate({
				rules:{
					displayOrder:{
						required:true,
						min:0,
						max:254
					},
					name:{
						required:true,
						remote:{
							url:'/goods/brand/verifyName?brandId='+$('#brandId').val(),
						},
						maxlength:30
						},
					url:{
						maxlength:200
					},
					description:{
						maxlength:200
					},
					keyWord:{
						maxlength:100
					}
				},
				messages:{
					displayOrder:{
						required:'必须填写',
						min:'必须为整数且取值范围0-254',
						max:'必须为整数且取值范围0-254'
					},
					name:{
						remote:'品牌名称重复！',
						required:'品牌名称必须填写',
						maxlength:'品牌名称长度不可超过30'
					},
					url:{
						maxlength:'品牌网址长度不可超过200'
					},
					description:{
						maxlength:'品牌描述长度不可超过200'
					},
					keyWord:{
						maxlength:'品牌关键字不可超过100'
					}
				}
			});
		});
		
	/*]]>*/
	</script>
	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{'/goods/brand/index?page='+${page}+'&amp;viewState='+${viewState}}" id="link_cancel" name="link_cancel" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-7">
			<div class="form">
				<form role="form" enctype="multipart/form-data" id="form_goods_brand" name="form_goods_brand" th:action="@{'/goods/brand/save?page='+${page}+'&amp;viewState='+${viewState}}" th:object="${brand}" method="post" class="form-horizontal">
					<h4 class="form-section">品牌基本信息</h4>
					<input type="hidden" id="brandId" th:field="*{id}" />
					<div class="form-body">
						<div class="form-group" th:class="${#fields.hasErrors('name')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">品牌名称<span class="required" aria-required="true">* </span></label>							
							<div class="col-md-7">
								<input type="text" id="name" name="name" class="form-control" placeholder="品牌名称" th:field="*{name}"/>
								<span class="help-block" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">品牌名称不能为空</span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">品牌网址</label>
							<div class="col-md-7">
								<input type="text" id="url" name="url"  class="form-control" placeholder="品牌链接" th:field="*{url}" />
								<span class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">品牌LOGO</label>
							<div class="col-md-7">
                                <input type="hidden" id="logo" th:field="*{logo}"/>
                                <div class="form-control" style="padding:0;">
	                                <span style="padding-left:12px;" id="file_upload_span" name="file_upload_span">未选择文件</span><input type="button" class="btn blue pull-right" onclick="uploadFile(this)" value="浏览"/>
                                </div>
								<p class="help-block text-center" style="color:red;display:none;" id="file_upload_help">上传的图片类型只能是png,gif,jpg,jpeg</p>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">品牌关键字</label>
							<div class="col-md-7">
								<input type="text" id="keyWord" name="keyWord" class="form-control" placeholder="品牌关键字" th:field="*{keyWord}" />
								<span class="help-block"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">品牌描述</label>
							<div class="col-md-7">
								<input type="text" id="description" name="description" class="form-control" placeholder="品牌描述" th:field="*{description}" />
								<span class="help-block"></span>
							</div>
						</div>					
						<div class="form-group" th:class="${#fields.hasErrors('displayOrder')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">显示顺序<span class="required" aria-required="true">* </span></label>
							<div class="col-md-7">
								<input type="text" id="displayOrder" name="displayOrder" class="form-control" placeholder="显示顺序" th:field="*{displayOrder}" />
								<span class="help-block" th:if="${#fields.hasErrors('displayOrder')}" th:errors="*{displayOrder}">品牌名称不能为空</span>
							</div>
						</div>						
						<div class="form-group">
							<label class="control-label col-md-3">是否显示</label>
							<div class="col-md-7">
								<div class="radio-list">
									<label class="radio-inline"><span><input type="radio" name="isShow"  id="radio_isShow1" value="1" checked="" th:field="*{displayed}" /></span> 是</label>
									<label class="radio-inline"><span><input type="radio" name="isShow" id="radio_isShow2" value="0" th:field="*{displayed}" /></span> 否</label>
								</div>						
							</div>
						</div>	
						<div class="form-group">
							<label class="control-label col-md-3">品牌类型</label>
							<div class="col-md-7">
					            <select th:field="*{type}" id="text_brandTypes" name="text_brandTypes" th:remove="all-but-first" class="form-control">
					                <option th:each="type : ${brandTypes}"
					                        th:value="${type}" th:text="${type.description}">Credit card</option>
					                <option>Another payment method</option>
					                <option>Another payment method</option>
					            </select>													
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">品牌故事</label>							
							<div class="col-md-7">
								<textarea rows="4" type="text" id="story" name="story" class="form-control" placeholder="品牌故事" th:field="*{story}" />
							</div>
						</div>						
					</div>	
					<div class="form-actions fluid">
						<div class="col-md-offset-3 col-md-9">
							<button type="submit" id="bt_submit" name="bt_submit" class="btn blue">提交</button>
							<!-- <button type="reset" id="btn_reset" name="btn_reset" class="btn default">清空</button> -->
						</div>
					</div>
				</form>		
			</div>
		</div>
		<div class="col-md-5">
			<form role="form" class="form">
				<h4 class="form-section">品牌LOGO预览</h4>
				<div class="form-body" id="brand_logo_display_div">
					<img id="brand_logo_display" name="brand_logo_display" style="width:100%;height:100%;"  th:if="${brand.logo != null}" th:src="${brand.logo}"/>
					<label th:if="${brand.logo == null}" th:text="未上传图片"></label>
				</div>
			</form>
		</div>
        <div style="display: none;">
            <form target="iframe_brand_image" action="/upload/BRANDS" enctype="multipart/form-data" method="post" id="form_brand_image" name="form_brand_image">
                <input type="file" id="imgFile" onchange="uploadFile2(this)" name="imgFile"/>
            </form>
        </div>
        <iframe style="display: none;" id="iframe_brand_image" name="iframe_brand_image" frameborder="0"></iframe>
	</div>
</div>	
</body>
</html>